<template>
  <div>
    <el-card class="box-card">
      <el-row :gutter="20" style="padding-left: 30px;">
        <el-col :span="6">
          <el-input placeholder="请输入" v-model="input" show-password></el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="getData">搜索</el-button>
        </el-col>
      </el-row>
      <el-table
          :data="orders"
          style="width: 100%;margin-top:30px;">
        <el-table-column
            prop="order_no"
            label="订单编号"
            width="160">
<!--          <template slot-scope="scope">-->
<!--            <i class="el-icon-time"></i>-->
<!--            <span style="margin-left: 10px">{{ scope.row.date }}</span>-->
<!--          </template>-->
        </el-table-column>
        <el-table-column
            label="下单时间"
            prop="order_time"
            width="160">
<!--          <template slot-scope="scope">-->
<!--            <i class="el-icon-time"></i>-->
<!--            <span style="margin-left: 10px">{{ scope.row.date }}</span>-->
<!--          </template>-->
        </el-table-column>
        <el-table-column
            prop="product_no"
            label="商品编号"
            width="160">
<!--          <template slot-scope="scope">-->
<!--            <el-popover trigger="hover" placement="top">-->
<!--              <p>姓名: {{ scope.row.name }}</p>-->
<!--              <p>住址: {{ scope.row.address }}</p>-->
<!--              <div slot="reference" class="name-wrapper">-->
<!--                <el-tag size="medium">{{ scope.row.name }}</el-tag>-->
<!--              </div>-->
<!--            </el-popover>-->
<!--          </template>-->
        </el-table-column>
        <el-table-column
            prop="product_name"
            label="商品名"
            width="160">
<!--          <template slot-scope="scope">-->
<!--            <el-popover trigger="hover" placement="top">-->
<!--              <p>姓名: {{ scope.row.name }}</p>-->
<!--              <p>住址: {{ scope.row.address }}</p>-->
<!--              <div slot="reference" class="name-wrapper">-->
<!--                <el-tag size="medium">{{ scope.row.name }}</el-tag>-->
<!--              </div>-->
<!--            </el-popover>-->
<!--          </template>-->
        </el-table-column>
        <el-table-column
            prop="product_price"
            label="商品原价"
            width="160">
<!--          <template slot-scope="scope">-->
<!--            <el-popover trigger="hover" placement="top">-->
<!--              <p>姓名: {{ scope.row.name }}</p>-->
<!--              <p>住址: {{ scope.row.address }}</p>-->
<!--              <div slot="reference" class="name-wrapper">-->
<!--                <el-tag size="medium">{{ scope.row.name }}</el-tag>-->
<!--              </div>-->
<!--            </el-popover>-->
<!--          </template>-->
        </el-table-column>
        <el-table-column
            prop="product_rate"
            label="商品折扣"
            width="160">
        </el-table-column>
        <el-table-column
            prop="order_income"
            label="订单收入"
            width="160">
        </el-table-column>
        <el-table-column
            prop="order_status"
            label="订单状态"
            width="200">
        </el-table-column>
        <el-table-column label="详情">
          <template>
            <el-button
                type="text"
                size="small">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px;">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-size="18"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "order",
  data() {
    return {
      total:0,
      orders: [],
    }
  },
  mounted() {
    let that = this
    this.$axios.get("http://127.0.0.1:80/order/getShopperOrderCount?usernumber=" + this.$store.state.usernumber).then(res => {
      that.total = res.data
      console.log(res.data)
    })
    this.$axios.get("http://127.0.0.1:80/order/getShopperOrder?usernumber=" + this.$store.state.usernumber).then(res => {
      that.orders = res.data
      console.log(res.data)
    })
  },
  methods: {
    getData() {
      this.$axios.post("http://127.0.0.1:80/order/add", {
        "usernumber": "929917283",
        "store_name": "丑妹超市"
      })
      // axios.post({
      //
      // })
    },
    getOrderInfo(id) {
      console.log(id)
    },

    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
}
</script>

<style scoped>
.parent_header {
  margin-bottom: 14px;
}

.search_header {
  display: flex;
}

.search_item {
  flex: 3;
  margin-left: 10px;
}

.box-card {
  width: 100%;
}
</style>
